import { Modal, useModal } from '@geist-ui/react';
import { useState } from 'react';

/**
 * 报名信息
 */
export default function RegInfo({ onClick }: { onClick(): void; }) {
	const { setVisible, bindings } = useModal(false);
	const [checked, setchecked] = useState(false);
	return <>
		<div className='cls004'>
			<span className='cls001'>报名信息</span>
			<input className='cls002' type='button' value='保存' onClick={() => {
				setVisible(true);
			}} />
			<hr />
			<Modal {...bindings}>
				<Modal.Title>提供材料真实性承诺</Modal.Title>
				<Modal.Content>
					<p className='cls005'>本人承诺，此次报名参加2021年河南省人社厅返乡创业网络大赛，所提交的申请材料和所附资料均真实合法，如有不实之处，本人愿意承担相应的法律责任，并承担由此产生的一切后果。</p>
					<div className='cls003'><div><input type='checkbox' checked={checked} onChange={(e) => {
						setchecked(!checked);
					}} /><span className='cls006 cls008'>同意</span></div></div>
				</Modal.Content>
				<Modal.Action passive onClick={() => setVisible(false)}><span className='cls006'>取消</span></Modal.Action>
				<Modal.Action style={{ backgroundColor: '#1890FF' }} onClick={() => {
					if (checked) {
						setVisible(false);
						onClick();
					}
				}}><span className='cls006'>提交</span></Modal.Action>
			</Modal>
		</div>
		<style jsx>{`
.cls008{
margin-left: 1rem;
}
.cls007{
width: 100%;
height: 100%;
background-color: #1890FF;
}
.cls006{
font-size: 18px;
color: black;
}
.cls005{
text-indent: 2rem;
}
.cls003{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.cls002{
	float: right;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-style: solid;
	border-width: 1px;
	border-radius: 6px;
	border-color: #1890FF;
	color: #1890FF;
	background-color: white;
	min-width: 240px;
	margin-top: 30px;
	transition: all 600ms;
}
.cls002:hover{
	background-color: #1890FF;
	color: white;
}
.cls004{
	margin-top: 20px;
	margin-left: 15rem;
	margin-right: 15rem;
	margin-bottom: 0;
}
span{
	font-family: 'Arial Normal', 'Arial';
	font-weight: 400;
	font-size: 24px;
	font-style: normal;
	color: #1890FF;
}
.cls001{
	margin-left: 10px;
}
.cls001::before{
	content: url(/images/u441.png);
	display: inline-block;
	width: 45px;
	height: 36px;
	margin-right: 20px;
}
`}</style>
	</>;
}
